<template>
	<div class="pageContacts overHid">
		<div class="goBackButtonBox">
			<div @click="handleClosed" class="item cursor-pointer el-icon-arrow-left font24"></div>
		</div>

		<div class="pageMainBox">
			<el-input name="selectBannedId" type="text" v-model="itemForm.bannedId" autocomplete="on"
				placeholder="输入查询的用户id" maxlength='16'    @keyup.enter.native.prevent="handleSelectUser">
			</el-input>
			<el-button class="itemSelect" type="primary" @click.native.prevent="handleSelectUser">
				查询用户</el-button>
			<div class="textCenter" v-if="isshowUserInfo">
				<el-tag class="user-status-tag" :type="userinfo.isAdmin ? 'success' : 'danger'">
					{{ userinfo.isAdmin ? '管理员' : '普通用户' }}
				</el-tag>
				<el-tag class="marginL5 marginT5"
					:type='userinfo.status?"success":"danger"'>状态：{{userinfo.status?"正常":"异常"}}</el-tag>
				<div>用户名：{{userinfo.username}} ID： {{userinfo.Id}}</div>
				<div><el-image style="width: 100px;height: 100px;" class=" borderr50"
						:src="userinfo.url+'?w=100&h=100&q=75'" fit="fill"></el-image>
				</div>
				{{userinfo.Integral}}
				<div class="" v-show="userinfo.gender">
					<i class="el-icon-male" style="color: #00f;font-size: 18px;"></i>
				</div>
				<div class="" v-show="!userinfo.gender">
					<i class="el-icon-female" style="color: #ff58b5;font-size: 18px;"></i>
				</div>
				<div class="">
					<template class="" v-for="(item,index) in userinfo.hobbylist">
						<el-tag class="marginL5 marginT5" :key="`hobbytag${index}`"
							:type="tagType[parseInt(Math.random(1) * 5)]">{{item}}</el-tag>
					</template>
				</div>
				<container-page :text="userinfo.signature" v-show="userinfo.signature"></container-page>
				<el-button class="itemBtn" type="primary" :loading="loadingStatus" v-if="storeUserinfo.Id==1"
					@click.native.prevent="handleToggleAdmin">
					{{ userinfo.isAdmin ? '取消-管理员权限' : '设置为管理员' }}
				</el-button>
			</div>
			<div v-else class="color-smill textCenter">
				{{resmessage ||"暂无数据"}}
			</div>
			<el-form autocomplete="on" :model="itemForm" :rules="regRules" ref="itemForm" label-position="left"
				style="width: 90%;margin-left: 5%;margin-top: 2%;">
				<el-form-item prop="bannedId">
					<el-input name="bannedId" type="text" v-model="itemForm.bannedId" autocomplete="on"
						placeholder="输入被操作用户id" maxlength='16'>
					</el-input>
				</el-form-item>
				<el-form-item prop="remark">
					<el-input name="remark" type="text" v-model="itemForm.remark" autocomplete="on" placeholder="输入操作备注"
						maxlength='80'>
					</el-input>
				</el-form-item>
				<el-form-item style="margin-bottom: 20px;text-align: center">
					<el-button class="itemBtn" type="primary" :loading="Vloading"
						@click.native.prevent="handleControls(1)">
						解封</el-button>
					<el-button class="itemBtn" type="primary" :loading="loading"
						@click.native.prevent="handleControls(0)">
						封禁</el-button>
				</el-form-item>
			</el-form>

		</div>

	</div>

</template>

<script>
	import {
		banned,
		getUserInfoAll,
		setAdminStatus
	} from '@/api/user'
	import {
		debounce
	} from "@/utils/common.js";
	import containerPage from "@/components/container/index"
	export default {
		name: "banned",
		components: {
			containerPage
		},
		data() {
			const validate = (rule, value, callback) => {
				if (!value) {
					callback(new Error("被封禁者id必填"));
				} else {
					callback();
				}
			};
			return {
				ListLoading: false,
				loading: false, //操作loading
				loadingStatus: false, //修改状态的loading
				Vloading: false,
				msgConfig: {
					minScrollBottom: 100, //距离msg底部height 小于？就查询
					isExecuteShowMore: false, //距离msg？部height
					msglistResults: false, //msg查询结果 false 终止查询
				},
				pageConfig: {
					pageSizes: 10, //条数
					pageNum: 1, //页数 第n页
				},
				resmessage: "",
				itemForm: {
					bannedId: "",
					remark: "",
					status: 0
				},
				regRules: {
					bannedId: [{
						required: true,
						trigger: "blur",
						validator: validate
					}],
				},
				userinfo: {},
				isshowUserInfo: false,
				tagType: ["", "success", "info", "warning", "danger"]
			}
		},
		computed: {
			storeUserinfo() {
				return this.$store.getters.userInfo;
			},
		},
		mounted() {
			if (!this.storeUserinfo.Id) {
				this.$router.push('home')
				return
			}

		},
		methods: {
			/**
			 * 切换管理员权限
			 */
			handleToggleAdmin: debounce(function() {
				try {
					if (this.itemForm.bannedId == 1) {
						this.$message({
							message: "倒反天罡[管理员你也操作呀]",
							type: 'warning'
						});
						return;
					}
					if (!this.itemForm.bannedId) {
						this.$message.error("请输入用户ID");
						return;
					}
					this.loadingStatus = true;
					setAdminStatus({
						bannedId: this.itemForm.bannedId,
						isAdmin: !this.userinfo.isAdmin
					}).then(res => {
						this.loadingStatus = false;
						this.$message.success(res.message || "操作成功");
						this.userinfo.isAdmin = !this.userinfo.isAdmin; // 更新状态
					}).catch(err => {
						this.loadingStatus = false;
						this.$message.error(err.message || "操作失败");
					});
				} catch (error) {
					this.$message.error("操作失败：" + error.message);
				}
			}),
			/**
			 * 获取用户信息
			 */
			handleSelectUser: debounce(function() {
				try {
					if (!this.itemForm.bannedId) {
						this.$message({
							message: "请输入id",
							type: 'error'
						});
						return;
					}
					getUserInfoAll({
						id: this.itemForm.bannedId
					}).then(data => {
						if (!data.data) {
							this.resmessage = data.message
							this.userinfo = []
							this.isshowUserInfo = false
							return;
						}
						this.isshowUserInfo = true;
						this.resmessage = ""
						this.userinfo = {
							...data.data
						}
						if (data.data.hobbylist) {
							this.userinfo.hobbylist = data.data.hobbylist.split(",")
						} else {
							this.userinfo.hobbylist = []
						}
					})
				} catch (error) {
					this.$message({
						message: error,
						type: 'error'
					});
				}
			}),
			handleClosed() {
				// this.$router.go(-1)
				this.$router.push({
					name: "home",
					params: {

					}
				})
			},
			/**操作封禁用户 status：1解封， 0封禁
			 */
			handleControls: debounce(function(status) {
				try {
					if (this.itemForm.bannedId == 1) {
						this.$message({
							message: "倒反天罡[管理员你也操作呀]",
							type: 'warning'
						});
						return;
					}
					this.itemForm.status = status;
					this.userinfo.status = status;
					this.$refs.itemForm.validate(valid => {
						if (valid) {
							if (status) {
								this.Vloading = true;
							} else {
								this.loading = true;
							}
							banned(this.itemForm).then(res => {
								if (status) {
									this.Vloading = false;
								} else {
									this.loading = false;
								}
								this.$message({
									message: res.message,
									type: 'success'
								});
							}).catch(err => {
								if (status) {
									this.Vloading = false;
								} else {
									this.loading = false;
								}
								this.$message({
									message: res.message,
									type: 'error'
								});
							})
						} else {
							return false;
						}
					});
				} catch (error) {
					//TODO handle the exception
				}
			})

		},
		watch: {

		}
	}
</script>

<style scoped>
	.pageContacts {
		width: 100%;
		padding: 0 10px;
		box-sizing: border-box;
	}


	.items {
		display: flex;
		justify-content: space-between;
		margin: 12px 0;
		align-items: center;
		border-radius: 8px;
		padding-bottom: 5px;
		border-bottom: 1px dashed #A0E9FF;
	}

	.items:hover {
		background-color: #A0E9FF;
	}



	/* 返回的按钮 */
	.goBackButtonBox {
		font-size: 24px;
		font-weight: 500;
		display: inline-block;
		position: fixed;
		left: 0;
		top: 0;
		margin: 0;
		padding: 0 20px;
		z-index: 22;
		width: 100%;
		height: 40px;
		line-height: 40px;
		text-align: left;
		background-color: #fff;
	}

	.goBackButtonBox .item {
		width: 50px;
	}

	.pageMainBox {
		margin-top: 45px;
		height: calc(100vh - 80px);
		padding-top: 20px;
		box-sizing: border-box;
		background-color: #fff;
	}

	.itemSelect,
	.itemBtn {
		width: 45%;
		margin-top: 20px;
		border-radius: 18px;
		background-image: linear-gradient(to top, #007adf 0%, #00ecbc 100%);
	}

	.itemBtn:nth-child(1) {
		color: #000;
		background-image: linear-gradient(120deg, #00aaff 0%, #aaaaff 100%);
	}

	.itemBtn:nth-child(2) {
		color: #000;
		background-image: linear-gradient(120deg, #b4b4b4 0%, #d4d4d4 100%);
	}

	.user-status-tag {
		font-size: 14px;
		/* 字体大小 */

		border-radius: 20px;
		/* 圆角 */
		color: #fff;
		/* 文字颜色 */
		font-weight: bold;
		/* 字体加粗 */
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
		/* 阴影效果 */
		transition: all 0.3s ease;
		/* 动画效果 */
		height: 32px;
		margin: 5px;
		/* 外边距 */
	}

	.user-status-tag:hover {
		transform: scale(1.05);
		/* 鼠标悬停时放大效果 */
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
		/* 鼠标悬停时阴影加深 */
	}

	/* 针对不同的状态类型调整样式 */
	.user-status-tag.el-tag--success {
		background-color: #4caf50;
		/* 管理员状态的背景色 */
	}

	.user-status-tag.el-tag--danger {
		background-color: #f44336;
		/* 普通用户状态的背景色 */
	}
</style>